<template>
	<div id="moviePage" v-infinite-scroll="loadMore" infinite-scroll-distance="150">
		<div id="bg"  :style="{backgroundImage:'url('+detailMovie.albumImg+')'} " v-if="detailMovie.albumImg!=undefined">		
		</div>
		<div id="bg"  :style="{backgroundImage:'url('+picFix(detailMovie.img)+')'}" v-else="">		
		</div>
		<div id="bgcolor" >
			
		</div>
		<div class="movieHeader">
		<div>
				<img :src="picFix(detailMovie.img)" class="over"/>
		</div>
			<div class="movieHeader_content">
				<div class="movieHeader_title">{{detailMovie.nm}}</div>
				<div class="movieHeader_word">{{detailMovie.enm}}</div>
				<div v-if="detailMovie.sc==0" class="movieHeader_word">暂无评分</div>
				<div v-else="" class="movieHeader_word"><span class="org">{{detailMovie.sc}}</span>({{(detailMovie.snum/10000).toFixed(1)}}万人评)</div>	
				<div class="movieHeader_word "  >
					<span style="margin-right: 4px;">{{detailMovie.cat}}</span>
					<span v-if="detailMovie.version.charAt(1)==3 &&detailMovie.version.length !=3 " class="verson " style="vertical-align: bottom;"><img src="../../../../image/下载 (5).png"/></span>
				<span v-else-if="detailMovie.version.charAt(1)==2" class="verson " style="vertical-align: bottom;"><img src="../../../../image/下载 (4).png"/></span>
				<span v-else-if="detailMovie.version==''" ></span>
				<span v-else="" class="verson verson_3d" style="vertical-align: bottom;"><img src="../../../../image/下载 (6).png"/></span>
				</div>
				<div class="movieHeader_word">{{detailMovie.src}}/{{detailMovie.dur}}分钟</div>
				<div class="movieHeader_word">{{detailMovie.pubDesc}}</div>
				<img src="../../../../image/下载 (7).png" class="small_button"/>
			</div>
		</div>
	        <!-- 时间表 -->
        <div class="timeTable" v-if="showDays.length" >
            <div class="scroll">
                <div class="dates"  v-for="(days,index) in showDays" :key="days.date"
                :class="{active:goIndex==index?true:false }" @click="dateIndex(index)">
                    <span v-if="index==0">今天</span>
                    <span v-else-if="index==1">明天</span>
                    <span v-else-if="index==2">后天</span>
                    <span v-else=""></span>
                    {{days.date.slice(5,7)}}月{{days.date.slice(8,10)}}日
                </div>
            </div>
			<hr class="homeHr" style="margin-bottom: 0px;"/>
		</div>
		<div class="movieServe">
			<div>全城</div>
			<div>品牌</div>
			<div>服务</div>
		
		</div>
		<hr class="homeHr"/>
		      <!-- 影院列表 -->
        <div class="cinemas-list">
            <ul>
                <li v-for='cin in cinemas' :key='cin.id' @click="toShows(cin.id)">
                    <div class="title-block">
                        <div class="title">
                            <span class="name">{{cin.nm}}</span>
                            <span class="sellPrice">
                                <span class="price">{{cin.sellPrice}}</span>元起
                            </span>
                        </div>
                        <div class="location">
                            <span class="addr textover1">{{cin.addr}}</span>
                            <span class="distance textover1">{{cin.distance}}</span>
                        </div>
                        <div class="cinTitle">
                        	<div v-if="cin.tag.allowRefund==1" class="endorse">退</div>
                        	<div v-if="cin.tag.endorse==1" class="endorse">改签</div>
                        	<div v-if="cin.tag.snack==1" class="snack">小吃</div>
                        	<div v-if="cin.tag.vipTag" class="snack">折扣卡</div>
                        	<div v-for="cinClass in cin.tag.hallType " class="cinClass">{{cinClass}}</div>
                        </div>
                        <div class="label" v-if="cin.promotion.cardPromotionTag !=undefined">
                        	<img src="../../../../image/下载 (8).png" />
                        	开卡特惠，首单2张立减2元
                        </div>
                        <div v-else=""></div>
                        <div class="showTimes">
                            近期场次：{{cin.showTimes}}
                        </div>
                    </div>
                </li>
            </ul>
             <div class="more">
                <mt-spinner type="snake"
                 color="red"></mt-spinner> 努力加载中...
            </div>
          </div>
	</div>
</template>

<script>
	import qs from 'qs';
	
	export default{
		created(){
			        // 获取今天日期		   
        this.day = this.today();	
			
			this.movieId=this.$route.params.movieId;
			
			//电影详情
			this.axios.get('/maoyan/ajax/detailmovie',{
				params:{
					movieId:this.movieId
				}
			}).then((res)=>{
				this.detailMovie=res.data.detailMovie
				
				//提交修改,修改title
				this.$store.state.headerTitle = this.detailMovie.nm;
			});
			//影院信息
		var timestamp = (new Date()).getTime();

        // 影院信息
        this.getCinemas(this.day,0);
			console.log(this.day)
		},
		data(){
			return {
			goIndex:0,
			 movieId : '',
            detailMovie:'',
            cinemas: [] ,
            day: '',
            offset:0,
            showDays :[],
            loading:true,
            goIndexday:''
			}
		},
		methods:{
			//获取今日日期的方法，返回今天的日期
		 today(){
            let d = new Date();
            let year = d.getFullYear();
            let month = d.getMonth()+1;
            let day = d.getDate();
            return year+'-'+month+'-'+day;
  
        },
       
        //点击变换相应日期的影院信息,
        dateIndex(index){
        	this.goIndex=index                      //日期下标
        	console.log(this.goIndex)
           this.goIndexday = this.showDays[this.goIndex].date;      //获取对应日期
           console.log(this.goIndexday)
             this.getnewCinemas(this.goIndexday,0)          
        },

        //调用请求相应日期的影院信息
        getnewCinemas(day,offset){
              this.axios.post('/maoyan/ajax/movie' ,qs.stringify({
                movieId: this.movieId,
                day: day,
                offset: offset,
                limit: 20,
                districtId: -1,
                lineId: -1,
                hallType: -1,
                brandId: -1,
                serviceId: -1,
                areaId: -1,
                stationId: -1,
                item: "",
                updateShowDay: true,
                reqId: 1545367192578,
                cityId: 20,
            })
              ).then((res)=>{
                  console.log(res)
                  this.cinemas=res.data.cinemas         //将相应日期的影院信息渲染到页面
                  this.offset=0
              })
        
        },
        //获取图片转换为相应宽高，replace直接替换
		 picFix(url){
		 	 if(typeof url == 'string'){
                return url.replace('w.h','148.208');
           }
        },
        
        // 点击相应队列作为参数带过去
	  toShows(cinemaId){
            this.$router.push({name:'shows', 
                params:{  cinemaId : cinemaId } ,
                query:{movieId: this.movieId},
               
            })
        },
        
        //到底加载获取改变偏移量获取数据
        getCinemas(day,offset){
            this.axios.post('/maoyan/ajax/movie' ,qs.stringify({
                movieId: this.movieId,
                day: day,
                offset: offset,
                limit: 20,
                districtId: -1,
                lineId: -1,
                hallType: -1,
                brandId: -1,
                serviceId: -1,
                areaId: -1,
                stationId: -1,
                item: "",
                updateShowDay: true,
                reqId: 1545367192578,
                cityId: 20,
            })
            ).then((res)=>{
                 if( res.data.cinemas.length !== 0 ){
                    // 已经上映
                    this.cinemas = this.cinemas.concat( res.data.cinemas ); //拼接起来
                }else{
                    let day = res.data.showDays.dates[0].date;
                    this.getCinemas(day,0)
                }
                this.showDays = res.data.showDays.dates;
            })
        },
        //到底加载
             loadMore(){
            console.log('到底加载');
            this.offset += 20;                  //每次偏移20
            if (this.goIndex) {
                 this.getCinemas(this.goIndexday , this.offset ); 
            }else{
                this.getCinemas(this.day, this.offset );       //调用getCinemas函数，把当天时间，跟最终偏移量传过去
            }
            
        }
      },
	}
</script>

<style>
</style>